<template>
  <div class="hello">
    <img src="../assets/u15_normal.png" alt="图标" />
    <h1 style="color:#42B983;font-size: 26px;">{{ msg }}</h1>
    <div>
      <button @click="gotoVisitor" class="custom">我是访客</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="gotoChildren" class="custom">我是签约儿童</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="gotoMechanism" class="custom">我是机构人员</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '贝诺儿童健康管理'
    }
  },
  methods: {
    gotoVisitor () {
      this.$router.push('/hospital')
    },
    gotoChildren () {
      this.$router.push('/children')
    },
    gotoMechanism () {
      this.$router.push('/mechanism')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  button {
    width: 300px;
    height: 150px;
    background: #33bdef;
    font-size: 20px;
    color: black;
  }

  button:hover {
    color: #ffffff;
    background: #019ad2;
    text-decoration: none;
  }

  .custom {
    margin-top: 150px;
  }
</style>
